<template>
    <div @click="slide" :class="{'disabled':disabled}" class="selectWindowDom select-row">
        <span v-if="!currentName" class="default-placholder">{{placeholder || "请选择所属窗口"}}</span>
        <span v-if="!!currentName" class="window-text">{{currentName}}</span>
        <div class="slideup-wrapper" v-bind:class="{slideup:toggle}">
            <div class="select-ul-wrapper">
                <ul v-for="(item,index) in windowsConfig" :key="index" class="select-ul">
                    <li v-on:click="onSelect(sItem)" v-bind:class="{active:sItem.name == currentName}" v-for="(sItem,sIndex) in item" :key="sIndex">{{sItem.name}}</li>
                </ul>
            </div>
            <div class="triangle"></div>
        </div>
    </div>
</template>

<script>
import { chunkArr } from "../../utils";
import { findByDictCode } from "../../config/api";

export default {
    props: ["value", "placeholder","disabled"],
    data() {
        return {
            toggle: false, //
            text: "hello",
            currentName: this.value, //记录当前选中的窗口
            windowsConfig: []
        };
    },
    created() {
        this.handleDefaultWindowsConfig();
        this.globalClick(this.initEvent);
    },

    methods: {
        initEvent(e) {
            var btn = document.querySelector(".selectWindowDom");
            if (btn) {
                if (!btn.contains(e.target)) {
                    //点击区域是否包含.menu-icon-wrapper
                    this.toggle = false;
                }
            }
        },
        /**
         * 设置所属窗口配置
         */
        handleDefaultWindowsConfig() {
            findByDictCode({ dictCode: "windowNum" }).then((result = {}) => {
                let data = result.data || [];
                let arr = [];
                data.map(item => {
                    arr.push({
                        name: item.dictDataName,
                        value: item.dictDataCode
                    });
                });
                this.windowsConfig = chunkArr(arr, 5);
            });
        },
        /**
         * 选择所属窗口
         */
        onSelect(item) {
            
            this.currentName = item.name;
            this.$emit("onSelect", item.name);
        },
        /**
         * 所属窗口弹出
         */
        slide() {
            if(this.disabled){
                return;
            }
            this.toggle = !this.toggle;
        }
    },
    watch: {
        value: function(n) {
            this.currentName = n;
        }
    }
};
</script>

<style lang="scss" scoped>
.select-row {
    height: 34px;
    border: 1px solid #d2d2d2;
    flex: 1;
    display: flex;
    align-items: center;
    position: relative;
    &.disabled{
        background: #eee;
    }
    .slideup-wrapper {
        transition: height 0.2s ease-in-out;
        z-index: 999;
        height: 0;
        position: absolute;
        top: calc(100% + 6px);
        width:100%;
        border: none;

        margin-left: -1px;
        padding: 2px;
        box-sizing: border-box;

        &.slideup {
            height: 118px;
            border: 1px solid #d2d2d2;

            .triangle {
                opacity: 1;
            }
        }
    }
    .select-ul-wrapper {
        height: 100%;
        background: #fff;

        /* display: none; */
        overflow: auto;
    }
    .triangle {
        opacity: 0;
        position: absolute;
        height: 0;
        width: 0;
        top: -6px;
        left: 50%;
        margin-left: -6px;
        border-bottom: 6px solid #d2d2d2;
        border-right: 6px solid transparent;
        border-left: 6px solid transparent;
        &:after {
            content: "";
            position: absolute;
            height: 0;
            width: 0;
            border-bottom: 5px solid #fff;
            border-right: 5px solid transparent;
            border-left: 5px solid transparent;
            left: -5px;
            top: 1px;
        }
    }
    .select-ul {
        display: flex;
        li {
            flex: 1;
            margin: 2px;
            background: #eeeeee;
            height: 24px;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            &.active {
                background: #1a36a9;
                color: #fff;
            }
        }
    }
}
.default-placholder {
    color: #c1c5cc;
    padding-left: 15px;
}
.window-text {
    padding-left: 15px;
}
</style>